<template>
  <el-dialog
      v-model="diaVisible"
      title="更改建筑排序"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="967px"
      @close="resetForm"
  >
    <draggable
        class="list-steps"
        :list="cardList"
        animation="300"
        :forceFallback="true"
        :scroll-sensitivity="150"
        group="steps"
        itemKey="name"
    >
      <template #item="{ element, index }">
        <div class="steps-item">{{ element.towername || element.brigename }}-{{index}}</div>
      </template>
    </draggable>

    <template #footer>
      <div class="dialog-footer">
        <div @click="submitForm" class="sure-btn" style="margin-right: 10px">确认</div>
        <div @click="resetForm" class="cancel-btn">取消</div>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {changeBuildingLocaitonUi} from "../../../router/api.js";
import draggable from 'vuedraggable'
export default {
  name: "sortCard",
  components: {draggable},
  data(){
    return {
      diaVisible: false,
      cardList: [
        /*{ name: '一区', value: 1 },
        { name: '二区', value: 2 },
        { name: '散货', value: 3 },
        { name: '散货1', value: 4 },
        { name: '散2', value: 5 },
        { name: '散货3', value: 6 },
        { name: '散货4', value: 7 },
        { name: '散货5', value: 8 },
        { name: '散货6', value: 9 },
        { name: '散货7', value: 10 },
        { name: '散货8', value: 11 },
        { name: '散货9', value: 12 },
        { name: '散货10', value: 13 },
        { name: '散货11', value: 14 },
        { name: '散货12', value: 15 },*/
      ],
    }
  },
  props: {
    lampData: {
      type: Array,
      default: () => {}
    }
  },
  watch: {
    lampData: {
      deep: true,
      handler(n){
        if(n.length) this.cardList = JSON.parse(JSON.stringify(n));
      }
    }
  },
  methods: {
    show(){
      this.diaVisible = true;
    },
    async submitForm(){
      let params = { brigeArea: this.cardList[0].brigeArea };
      let buildinglist = [];
      this.cardList.forEach((opt,idx) => {
        buildinglist.push({
          buildingName: opt.towername || opt.brigename,
          locationUi: idx
        })
      })
      params['buildingList'] = buildinglist;
      let res =  await changeBuildingLocaitonUi(params);
      if (res.data.code == 200) {
        this.resetForm();
        this.$emit('success')
      }
    },
    resetForm(){
      this.diaVisible = false;
    }
  }
}
</script>

<style scoped lang="scss">
.list-steps{
  overflow: hidden;
  padding: 0 40px;
  .steps-item{
    float: left;
    width: 152px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    background-color: #E2E6EC;
    border: 1px solid #CAD5D8;
    border-radius: 4px;
    color: #336666;
    margin: 20px 20px 0 0;
    user-select: none;
    cursor: pointer;

    &:nth-child(5n){
      margin-right: 0;
    }
  }

}
</style>
